/* 公共颜色 */
:root {
  --comment-white-color: #ffffff;
  --comment-black-color: #000000;
  --bg-color: var(--main-2-ha1);
  --red-color: #ff0000;
  --pink-color: pink;
  --green-color: #00ff00;
  --blue-color: #0000ff;
  --box-shadow: rgba(0, 0, 0, 0.3);
  --box-shadow-c: var(--main-2);
  --text-color: var(--comment-white-color);
  --header-bg-color: linear-gradient(to left bottom, #d16ba5, #ed7790, #fb8b7c, #fca66e, #f1c26d, #e0d274,
          #cce184, #b6ef9b, #9ff4af, #87f7c5, #71fadb, #5ffbf1);
  --footer-bg: linear-gradient(90deg, var(--main-1-h8) 0%, var(--main-1-h2) 20%, var(--main-1-h10) 50%,
          var(--main-1-h4) 80%, var(--main-1-h1) 100%);
  --note-text: rgba(109, 164, 219, 0.8);
  --note-hover: rgba(168, 49, 72, 0.8);
}

/* 白天颜色 */
[theme-sys="light"]:root {
  --text-color: var(--comment-white-color);
  --bg-color: var(--main-2-ha1);
}

/* 黑夜颜色 */
[theme-sys="dark"]:root {
  --text-color: var(--comment-black-color);
  --bg-color: hsl(150deg, 16%, 15%);
  filter: brightness(0.7);
}

/* 主题颜色 */
[theme-el="default"]:root {
  --main-1: hsl(273deg, 27%, 70%);
  --main-1-h10: hsl(273deg, 27%, 90%);
  --main-1-h8: hsl(273deg, 27%, 80%);
  --main-1-h6: hsl(273deg, 27%, 60%);
  --main-1-h4: hsl(273deg, 27%, 40%);
  --main-1-h2: hsl(273deg, 27%, 20%);
  --main-1-h1: hsl(273deg, 27%, 10%);
  --main-1-hs3: hsl(273deg, 100%, 70%);
  --main-1-hs2: hsl(273deg, 50%, 70%);
  --main-1-hs1: hsl(273deg, 10%, 70%);
  --main-2: hsl(241deg, 100%, 89%);
  --main-2-h10: hsl(241deg, 100%, 90%);
  --main-2-h8: hsl(241deg, 100%, 80%);
  --main-2-h6: hsl(241deg, 100%, 60%);
  --main-2-h4: hsl(241deg, 100%, 40%);
  --main-2-h2: hsl(241deg, 100%, 20%);
  --main-2-h1: hsl(241deg, 100%, 10%);
  --main-2-hs3: hsl(241deg, 100%, 89%);
  --main-2-hs2: hsl(241deg, 50%, 89%);
  --main-2-hs1: hsl(241deg, 10%, 89%);
  --main-2-ha3: hsl(241deg, 100%, 89%, 0.8);
  --main-2-ha2: hsl(241deg, 100%, 89%, 0.5);
  --main-2-ha1: hsl(241deg, 100%, 89%, 0.3);
}

[theme-el="cen-fui"]:root {
  --main-1: hsl(26deg, 100%, 53%);
  --main-1-h10: hsl(26deg, 100%, 90%);
  --main-1-h8: hsl(26deg, 100%, 80%);
  --main-1-h6: hsl(26deg, 100%, 60%);
  --main-1-h4: hsl(26deg, 100%, 40%);
  --main-1-h2: hsl(26deg, 100%, 20%);
  --main-1-h1: hsl(26deg, 100%, 10%);
  --main-1-hs3: hsl(26deg, 100%, 53%);
  --main-1-hs2: hsl(26deg, 50%, 53%);
  --main-1-hs1: hsl(26deg, 10%, 53%);
  --main-2: hsl(300deg, 1%, 76%);
  --main-2-h10: hsl(300deg, 1%, 90%);
  --main-2-h8: hsl(300deg, 1%, 80%);
  --main-2-h6: hsl(300deg, 1%, 60%);
  --main-2-h4: hsl(300deg, 1%, 40%);
  --main-2-h2: hsl(300deg, 1%, 60%);
  --main-2-h1: hsl(300deg, 1%, 10%);
  --main-2-hs3: hsl(300deg, 100%, 76%);
  --main-2-hs2: hsl(300deg, 50%, 76%);
  --main-2-hs1: hsl(300deg, 10%, 76%);
  --main-2-ha3: hsl(300deg, 1%, 90%, 0.8);
  --main-2-ha2: hsl(300deg, 1%, 90%, 0.5);
  --main-2-ha1: hsl(300deg, 1%, 90%, 0.3);
}

[theme-el="lv-qin"]:root {
  --main-1: hsl(130deg, 17%, 28%);
  --main-1-h10: hsl(130deg, 17%, 90%);
  --main-1-h8: hsl(130deg, 17%, 80%);
  --main-1-h6: hsl(130deg, 17%, 60%);
  --main-1-h4: hsl(130deg, 17%, 40%);
  --main-1-h2: hsl(130deg, 17%, 20%);
  --main-1-h1: hsl(130deg, 17%, 10%);
  --main-1-hs3: hsl(130deg, 100%, 28%);
  --main-1-hs2: hsl(130deg, 50%, 28%);
  --main-1-hs1: hsl(130deg, 10%, 28%);
  --main-2: hsl(98deg, 16%, 60%);
  --main-2-h10: hsl(98deg, 16%, 90%);
  --main-2-h8: hsl(98deg, 16%, 80%);
  --main-2-h6: hsl(98deg, 16%, 60%);
  --main-2-h4: hsl(98deg, 16%, 40%);
  --main-2-h2: hsl(98deg, 16%, 50%);
  --main-2-h1: hsl(98deg, 16%, 10%);
  --main-2-hs3: hsl(98deg, 100%, 60%);
  --main-2-hs2: hsl(98deg, 50%, 60%);
  --main-2-hs1: hsl(98deg, 10%, 60%);
  --main-2-ha3: hsl(98deg, 16%, 60%, 0.8);
  --main-2-ha2: hsl(98deg, 16%, 60%, 0.5);
  --main-2-ha1: hsl(98deg, 16%, 60%, 0.3);
}

[theme-el="qin-mian"]:root {
  --main-1: hsl(252deg, 29%, 72%);
  --main-1-h10: hsl(252deg, 29%, 90%);
  --main-1-h8: hsl(252deg, 29%, 80%);
  --main-1-h6: hsl(252deg, 29%, 60%);
  --main-1-h4: hsl(252deg, 29%, 40%);
  --main-1-h2: hsl(252deg, 29%, 20%);
  --main-1-h1: hsl(252deg, 29%, 10%);
  --main-1-hs3: hsl(252deg, 60%, 53%);
  --main-1-hs2: hsl(252deg, 40%, 53%);
  --main-1-hs1: hsl(252deg, 10%, 53%);
  --main-2: hsl(1deg, 84%, 88%);
  --main-2-h10: hsl(1deg, 84%, 95%);
  --main-2-h8: hsl(1deg, 84%, 90%);
  --main-2-h6: hsl(1deg, 84%, 85%);
  --main-2-h4: hsl(1deg, 84%, 75%);
  --main-2-h2: hsl(1deg, 100%, 85%, 0.8);
  --main-2-h1: hsl(1deg, 84%, 70%);
  --main-2-hs3: hsl(1deg, 100%, 88%);
  --main-2-hs2: hsl(1deg, 50%, 88%);
  --main-2-hs1: hsl(1deg, 10%, 88%);
  --main-2-ha3: hsl(1deg, 84%, 88%, 0.8);
  --main-2-ha2: hsl(1deg, 84%, 88%, 0.5);
  --main-2-ha1: hsl(1deg, 84%, 88%, 0.3);
}

[theme-el="qin-zhi"]:root {
  --main-1: hsl(221deg, 56%, 43%);
  --main-1-h10: hsl(221deg, 56%, 90%);
  --main-1-h8: hsl(221deg, 56%, 80%);
  --main-1-h6: hsl(221deg, 56%, 60%);
  --main-1-h4: hsl(221deg, 56%, 40%);
  --main-1-h2: hsl(221deg, 56%, 20%);
  --main-1-h1: hsl(221deg, 56%, 10%);
  --main-1-hs3: hsl(221deg, 100%, 43%);
  --main-1-hs2: hsl(221deg, 50%, 43%);
  --main-1-hs1: hsl(221deg, 10%, 43%);
  --main-2: hsl(40deg, 98%, 61%);
  --main-2-h10: hsl(40deg, 98%, 90%);
  --main-2-h8: hsl(40deg, 98%, 80%);
  --main-2-h6: hsl(40deg, 98%, 60%);
  --main-2-h4: hsl(40deg, 98%, 40%);
  --main-2-h2: hsl(40deg, 98%, 50%);
  --main-2-h1: hsl(40deg, 98%, 10%);
  --main-2-hs3: hsl(40deg, 100%, 61%);
  --main-2-hs2: hsl(40deg, 50%, 61%);
  --main-2-hs1: hsl(40deg, 10%, 61%);
  --main-2-ha3: hsl(40deg, 98%, 61%, 0.8);
  --main-2-ha2: hsl(40deg, 98%, 61%, 0.5);
  --main-2-ha1: hsl(40deg, 98%, 61%, 0.3);
}

[theme-el="tuo-fui"]:root {
  --main-1: hsl(28deg, 47%, 52%);
  --main-1-h10: hsl(28deg, 47%, 90%);
  --main-1-h8: hsl(28deg, 47%, 80%);
  --main-1-h6: hsl(28deg, 47%, 60%);
  --main-1-h4: hsl(28deg, 47%, 40%);
  --main-1-h2: hsl(28deg, 47%, 20%);
  --main-1-h1: hsl(28deg, 47%, 10%);
  --main-1-hs3: hsl(28deg, 100%, 52%);
  --main-1-hs2: hsl(28deg, 50%, 52%);
  --main-1-hs1: hsl(28deg, 10%, 52%);
  --main-2: hsl(351deg, 11%, 35%);
  --main-2-h10: hsl(351deg, 11%, 90%);
  --main-2-h8: hsl(351deg, 11%, 80%);
  --main-2-h6: hsl(351deg, 11%, 60%);
  --main-2-h4: hsl(351deg, 11%, 40%);
  --main-2-h2: hsl(351deg, 11%, 20%);
  --main-2-h1: hsl(351deg, 11%, 10%);
  --main-2-hs3: hsl(351deg, 100%, 35%);
  --main-2-hs2: hsl(351deg, 50%, 35%);
  --main-2-hs1: hsl(351deg, 10%, 35%);
  --main-2-ha3: hsl(351deg, 11%, 35%, 0.8);
  --main-2-ha2: hsl(351deg, 11%, 35%, 0.5);
  --main-2-ha1: hsl(351deg, 11%, 35%, 0.3);
}

[theme-el="cen-lan"]:root {
  --main-1: hsl(30deg, 100%, 50%);
  --main-1-h10: hsl(30deg, 100%, 90%);
  --main-1-h8: hsl(30deg, 100%, 80%);
  --main-1-h6: hsl(30deg, 100%, 60%);
  --main-1-h4: hsl(30deg, 100%, 40%);
  --main-1-h2: hsl(30deg, 100%, 20%);
  --main-1-h1: hsl(30deg, 100%, 10%);
  --main-1-hs3: hsl(30deg, 100%, 50%);
  --main-1-hs2: hsl(30deg, 50%, 50%);
  --main-1-hs1: hsl(30deg, 10%, 50%);
  --main-2: hsl(224deg, 99%, 33%);
  --main-2-h10: hsl(224deg, 99%, 90%);
  --main-2-h8: hsl(224deg, 99%, 80%);
  --main-2-h6: hsl(224deg, 99%, 60%);
  --main-2-h4: hsl(224deg, 99%, 40%);
  --main-2-h2: hsl(224deg, 99%, 20%);
  --main-2-h1: hsl(224deg, 99%, 10%);
  --main-2-hs3: hsl(224deg, 100%, 33%);
  --main-2-hs2: hsl(224deg, 50%, 33%);
  --main-2-hs1: hsl(224deg, 10%, 33%);
  --main-2-ha3: hsl(224deg, 99%, 33%, 0.8);
  --main-2-ha2: hsl(224deg, 99%, 33%, 0.5);
  --main-2-ha1: hsl(224deg, 99%, 33%, 0.3);
}

[theme-el="huang-long"]:root {
  --main-1: hsl(50deg, 100%, 60%);
  --main-1-h10: hsl(50deg, 100%, 90%);
  --main-1-h8: hsl(50deg, 100%, 80%);
  --main-1-h6: hsl(50deg, 100%, 60%);
  --main-1-h4: hsl(50deg, 100%, 40%);
  --main-1-h2: hsl(50deg, 100%, 20%);
  --main-1-h1: hsl(50deg, 100%, 10%);
  --main-1-hs3: hsl(50deg, 100%, 60%);
  --main-1-hs2: hsl(50deg, 50%, 60%);
  --main-1-hs1: hsl(50deg, 10%, 60%);
  --main-2: hsl(76deg, 59%, 39%);
  --main-2-h10: hsl(76deg, 59%, 90%);
  --main-2-h8: hsl(76deg, 59%, 80%);
  --main-2-h6: hsl(76deg, 59%, 60%);
  --main-2-h4: hsl(76deg, 59%, 40%);
  --main-2-h2: hsl(76deg, 59%, 30%);
  --main-2-h1: hsl(76deg, 59%, 10%);
  --main-2-hs3: hsl(76deg, 100%, 39%);
  --main-2-hs2: hsl(76deg, 50%, 39%);
  --main-2-hs1: hsl(76deg, 10%, 39%);
  --main-2-ha3: hsl(76deg, 59%, 39%, 0.8);
  --main-2-ha2: hsl(76deg, 59%, 39%, 0.5);
  --main-2-ha1: hsl(76deg, 59%, 39%, 0.3);
}

[theme-el="qianlv-qin"]:root {
  --main-1: hsl(120deg, 98%, 79%);
  --main-1-h10: hsl(120deg, 98%, 90%);
  --main-1-h8: hsl(120deg, 98%, 80%);
  --main-1-h6: hsl(120deg, 98%, 60%);
  --main-1-h4: hsl(120deg, 98%, 40%);
  --main-1-h2: hsl(120deg, 98%, 20%);
  --main-1-h1: hsl(120deg, 98%, 10%);
  --main-1-hs3: hsl(120deg, 100%, 79%);
  --main-1-hs2: hsl(120deg, 50%, 79%);
  --main-1-hs1: hsl(120deg, 10%, 79%);
  --main-2: hsl(183deg, 100%, 25%);
  --main-2-h10: hsl(183deg, 100%, 90%);
  --main-2-h8: hsl(183deg, 100%, 80%);
  --main-2-h6: hsl(183deg, 100%, 60%);
  --main-2-h4: hsl(183deg, 100%, 40%);
  --main-2-h2: hsl(183deg, 100%, 20%);
  --main-2-h1: hsl(183deg, 100%, 10%);
  --main-2-hs3: hsl(183deg, 100%, 25%);
  --main-2-hs2: hsl(183deg, 50%, 25%);
  --main-2-hs1: hsl(183deg, 10%, 25%);
  --main-2-ha3: hsl(183deg, 100%, 25%, 0.8);
  --main-2-ha2: hsl(183deg, 100%, 25%, 0.5);
  --main-2-ha1: hsl(183deg, 100%, 25%, 0.3);
}

